<template>
  <div 
    class="menu-container"
    @keydown="handleKeyDown"
    tabindex="0"
  >
    <!-- SVG 曲线路径（仅用于参考） -->
    <svg class="bezier-curve" viewBox="0 0 800 80">
      <defs>
        <linearGradient id="curveGradient" x1="0%" y1="0%" x2="100%" y2="0%">
          <stop offset="0%" stop-color="white" />
          <stop offset="50%" stop-color="#6796d3" />
          <stop offset="100%" stop-color="white" />
        </linearGradient>
      </defs>
      <path :d="bezierPath" fill="none" :stroke="`url(#curveGradient)`" stroke-width="3" />
    </svg>

    <!-- 菜单容器 -->
    <div class="menu-items">
      <div
        v-for="(item, index) in items"
        :key="index"
        class="menu-item"
        :class="{ active: selected === index }"
        :style="getItemStyle(index)"
        @click="handleItemClick(index)"
      >
        {{ item.label }}
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, watch } from 'vue'

// 定义 props
const props = defineProps({
  items: {
    type: Array,
    required: true,
    default: () => [
      { label: '首页' },
      { label: 'MES' },
      { label: '智慧能耗' },
      { label: '设备管理' },
      { label: 'ERP' },
      { label: '设备巡检' }
    ]
  },
  selectedIndex: {
    type: Number,
    default: 0
  },
  curveParams: {
    type: Object,
    default: () => ({
      startX: -100,
      endX: 900,
      controlY: 100
    })
  }
})

// 定义 emits
const emit = defineEmits(['update:selectedIndex', 'item-click'])

// 内部状态
const selected = ref(props.selectedIndex)
const tValues = ref([])
const positions = ref([])
const isTransitioning = ref(false)

// 贝塞尔曲线路径（SVG用）
const bezierPath = computed(() => {
  const { startX, endX, controlY } = props.curveParams
  return `M ${startX},0 Q ${(startX + endX) / 2},${controlY} ${endX},0`
})
// 二次贝塞尔曲线的导数（切线方向）
function getBezierTangent(t, startX, endX, controlY) {
  const dx = 2 * (1 - t) * ((startX + endX) / 2 - startX) + 2 * t * (endX - (startX + endX) / 2)
  const dy = 2 * (1 - t) * controlY
  return Math.atan2(dy, dx) * (180 / Math.PI) // 返回角度（度）
}

// 获取样式
function getItemStyle(index) {
  const pos = positions.value[index] || { x: 0, y: 0, opacity: 0 }
  
  // 移除严格的边界检查，使用计算出的opacity值
  // 这样即使位置稍微超出，也能显示（通过透明度控制）
  
  return {
    transform: `translate(${pos.x + 90}%, ${pos.y - 40}px) `,
    opacity: pos.opacity || 0,
    transition: isTransitioning.value 
      ? 'transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1)'
      : 'none'
  }
}
// 布局函数：根据当前选中项重新计算 t 分布
function layoutItems(selectedIndex, immediate = false) {
  if (isTransitioning.value && !immediate) return
  
  const count = props.items.length
  const { startX, endX, controlY } = props.curveParams

  // 启用过渡动画
  if (!immediate) {
    isTransitioning.value = true
  }

  const tValuesLocal = []
  
  // 特殊处理：当只有1个项目时
  if (count === 1) {
    tValuesLocal.push(0.5)
  } else if (count === 2) {
    // 两个项目时，根据选中项动态调整位置
    // 选中第一个时，第一个在中心偏左，第二个在中心偏右
    // 选中第二个时，第一个在中心偏左，第二个在中心偏右（位置互换效果）
    const spacing = 0.25 // 间距，确保都在可见范围内
    if (selectedIndex === 0) {
      tValuesLocal.push(0.5 - spacing / 2) // 第一个项目（选中）
      tValuesLocal.push(0.5 + spacing / 2) // 第二个项目
    } else {
      tValuesLocal.push(0.5 - spacing / 2) // 第一个项目
      tValuesLocal.push(0.5 + spacing / 2) // 第二个项目（选中）
    }
  } else {
    // 三个或更多项目时，使用原来的逻辑
    for (let i = 0; i < count; i++) {
      const offset = (i - selectedIndex) * (1 / (count - 1)) * 0.8
      const t = 0.5 + offset
      tValuesLocal.push(t)
    }
  }

  tValues.value = tValuesLocal

  positions.value = tValuesLocal.map((t, index) => {
    // 对于所有项目，都计算实际位置，不限制t值
    // 这样即使t超出0-1，也能正确计算位置
    let opacity = 1
    
    // 对于边界外的项，逐渐降低透明度，但不完全隐藏
    if (t < 0 || t > 1) {
      const distance = t < 0 ? Math.abs(t) : t - 1
      opacity = Math.max(0.3, 1 - distance * 1.5) // 最低保持30%透明度，让项目可见
    }

    // 使用实际的t值计算位置，不限制范围
    const x =
      (1 - t) ** 2 * startX + 
      2 * (1 - t) * t * ((startX + endX) / 2) + 
      t ** 2 * endX

    const y = 
      (1 - t) ** 2 * 0 + 
      2 * (1 - t) * t * controlY + 
      t ** 2 * 0

    return {
      x: x - 40,
      y: y,
      opacity
    }
  })

  // 动画结束后重置过渡状态
  if (!immediate) {
    setTimeout(() => {
      isTransitioning.value = false
    }, 500)
  }
}
// 初始化布局
layoutItems(selected.value, true)

// 点击事件处理
function handleItemClick(index) {
  if (index === selected.value || isTransitioning.value) return
  
  selected.value = index
  emit('update:selectedIndex', index)
  emit('item-click', index)
  layoutItems(index)
}

// 键盘导航处理
function handleKeyDown(event) {
  if (event.key === 'ArrowLeft' || event.keyCode === 37) {
    event.preventDefault()
    navigateToAdjacent(-1)
  } else if (event.key === 'ArrowRight' || event.keyCode === 39) {
    event.preventDefault()
    navigateToAdjacent(1)
  }
}

// 导航到相邻项
function navigateToAdjacent(direction) {
  if (isTransitioning.value) return
  
  const newIndex = selected.value + direction
  if (newIndex >= 0 && newIndex < props.items.length) {
    handleItemClick(newIndex)
  }
}

// 监听 props 变化
watch(
  () => props.selectedIndex,
  newVal => {
    if (newVal !== selected.value) {
      selected.value = newVal
      layoutItems(newVal)
    }
  }
)

</script>

<style scoped>
.menu-container {
  position: relative;
  width: 800px;
  height: 100%;
  margin: 0 auto;
  overflow: visible;
  outline: none; /* 移除焦点时的默认轮廓 */
}

.menu-container:focus {
  outline: none;
}

.menu-items {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: auto;
}

.menu-item {
  position: absolute;
  width: 80px;
  height: 40px;
  color: #ccc;
  text-align: center;
  line-height: 40px;
  cursor: pointer;
  user-select: none;
  font-size: 16px;
  background: transparent;
  white-space: nowrap;
  will-change: transform, opacity; /* 优化动画性能 */
  backface-visibility: hidden; /* 防止动画闪烁 */
  transform: translateZ(0); /* 启用硬件加速 */
}

.menu-item:hover {
  color: #05ebef;
}

.menu-item.active {
  font-weight: 700;
  color: #05ebef;
}
</style>
